<template>
  <div
    class="mingshikecheng"
    ref="tscroll"
  >
   <!-- :style="{width: type.imgUrls.length * fenleiwidth+`px`}" -->
    <div
      class="flexs"
    >
      <section
        class="books"
        v-for="(item,index) in type.imgUrls"
        :key="index"
        @click="ququ(item)"
      >
        <section class="books-banner">
          <!-- object-fit:cover; -->
          <img
            :src="item.src"
            style="width:100%;height:100%;"
          >
          <img
            @click.stop="bofang(item,index)"
            :src="homeaudio === item.audio.content && !audiostate ? 'https://o6wndwjxn.qnssl.com/%E6%9A%82%E5%81%9C@3x.png':'https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE@3x.png'"
            class="bofang"
          >
        </section>
        <section class="books-title">
          {{item.param.name}}
        </section>
        <section style="text-align: right; width: calc(100vw * 216 / 750);">
          <span style="text-decoration:line-through;font-size:10px;color: #B3B3B3;">￥{{item.param.money}}</span>
          <span style="font-size:10px;color:#DA4131;">￥{{item.param.preferential_money}}</span>
        </section>
      </section>
    </div>
  </div>
</template>
<script>
// import { addlatelyclass } from '@/api/home'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
export default {
  props: ['type'],
  data () {
    return {
      fenleiwidth: 0,
      clientWidth: '',
      audiostate: this.$store.state.audio.audioplayer.audio.paused,
      audioindex: ''
    }
  },
  computed: {
    ...mapState({
      user_id: state => state.member_id,
      homeaudio: state => state.audio.homeaudio,
      audioplayer: state => state.audioplayer
    })
  },
  methods: {
    ququ (item) {
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: item.param.curriculum_id
          }
        })
      } else {
        window.location.href = `/coursedetails?curriculumId=${item.param.curriculum_id}`
      }
    },
    bofang (item, index) {
      // let obj = {
      //   chapter_id: item.audio.chapter_id,
      //   member_id: this.user_id,
      //   curriculum_id: item.audio.curriculum_id
      // }
      // addlatelyclass(obj).then(res => {
      //   console.log(res)
      // })
      // console.log(item.audio.content)
      this.$store.commit('homeaudio', item.audio.content)
      this.$store.commit('setselect', item.audio)
      this.$store.state.audio.audioplayer.toggle()
      this.audiostate = this.$store.state.audio.audioplayer.audio.paused
    }
  },
  watch: {
    clientWidth: function () {
      this.fenleiwidth = parseInt(this.clientWidth) * 216 / 750 + parseInt(this.clientWidth) * 20 / 750
      console.log(this.fenleiwidth)
    }
  },
  mounted () {
    // console.log(this.type.imgUrls)
    this.clientWidth = `${document.documentElement.clientWidth}`
    this.$nextTick(() => {
      let tscrollDom = this.$refs.tscroll
      this.aBScroll = new BScroll(tscrollDom, {
        scrollX: true,
        scrollY: false,
        click: true
      })
    })
  }
}
</script>

<style lang="less" scoped>
.mingshikecheng {
  width: calc(100vw * 686 / 750);
  margin: 0 auto calc(100vw * 30 / 750) auto;
  overflow: hidden;
}
.flexs {
  display: flex;
  width: calc(100vw * 686 / 750);
  justify-content: center;
  section:nth-of-type(2){
    flex: 1;
  }
}
.books {
  width: calc(100vw * 216 / 750);
}
.books * {
  margin: 0 auto;
}
.books-banner {
  width: calc(100vw * 216 / 750);
  height: calc(100vw * 274 / 750);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.books-title {
  width: calc(100vw * 216 / 750);
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  min-height: 40px;
  max-height: 40px;
  color: #333333;
}
.bofang {
  width: calc(100vw * 64 / 750);
  height: calc(100vw * 64 / 750);
  position: absolute;
  right: calc(100vw * 25 / 750);
  bottom: calc(100vw * 25 / 750);
}
</style>
